<!-- 应用中心 列表管理 -->
<template>
	<div class="app-container">
		<div class="wx-user-box">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label=""><el-input style="width: 300px;" v-model="formInline.name" clearable placeholder="请输入应用名称查询" @change="sousuo()"></el-input></el-form-item>
				<el-form-item><el-button type="primary" @click="sousuo()" icon="el-icon-search">查询/筛选</el-button></el-form-item>
				<el-form-item><el-button type="success" @click="add()" icon="el-icon-circle-plus-outline">添加应用</el-button></el-form-item>
			</el-form>

			<el-table :data="tableData" style="width: 100%" row-key="id" border :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
				<el-table-column prop="app_name" label="应用名称"></el-table-column>
				<el-table-column prop="id" label="图标" width="80px">
					<template slot-scope="scope">
						<el-image 
							v-if="scope.row.app_icon"
						    style="width: 50px; height: 50px"
						    :src="scope.row.app_icon" 
						    :preview-src-list="[scope.row.app_icon]">
						  </el-image>
					</template>
				</el-table-column>
				<el-table-column prop="app_code" label="应用代码"></el-table-column>
				<el-table-column prop="app_desc" label="描述信息"></el-table-column>
				<el-table-column prop="app_url" label="应用地址"></el-table-column>
				<!-- <el-table-column prop="xcx_url" label="小程序地址"></el-table-column>
				<el-table-column prop="html_url" label="H5地址"></el-table-column> -->
				<el-table-column prop="app_sort" label="排序" width="70px"></el-table-column>
				<el-table-column label="是否在小程序显示" width="80px">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.state">是</el-tag>
						<el-tag v-else type="info">否</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="状态" width="70px">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.state == 1">正常</el-tag>
						<el-tag v-else-if="scope.row.state == 2" type="info">关闭</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createtime" label="创建时间" width="100px"></el-table-column>
				<el-table-column label="操作" width="160px">
					<template slot-scope="scope">
						<div v-if="scope.row.tier == 1">
							<el-button type="text" size="small" @click="addRel(scope.row)">添加菜单</el-button>
							<el-button type="text" size="small" @click="setItem(scope.row)">编辑</el-button>
							<el-button type="text" size="small" @click="openDel(scope.row.app_id)">删除</el-button>
						</div>
						<div v-if="scope.row.tier == 2">
							<el-button type="text" size="small" @click="addRel(scope.row)">添加菜单</el-button>
							<el-button type="text" size="small" @click="setItemRel(scope.row)">编辑</el-button>
							<el-button type="text" size="small" @click="delAppRel(scope.row.id)">删除</el-button>
						</div>
						<div v-if="scope.row.tier == 3">
							<el-button type="text" size="small" @click="setItemRel(scope.row)">编辑</el-button>
							<el-button type="text" size="small" @click="delAppRel(scope.row.id)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="el-pagination">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page"
					:page-sizes="[10, 100, 200, 300, 400]"
					:page-size="size"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</div>
		
		<my-add v-if="dialogVisible" :item="item" @close="onClose"></my-add>
		<my-add-rel v-if="dialogVisible1" :item="itemRel" @close="onClose1"></my-add-rel>
	</div>
</template>

<script>
import Api from '@/api/pages/application-center/index.js';
import myAdd from './add.vue';
import myAddRel from './addRel.vue';
export default {
	name: 'application-center_list',
	components:{myAdd,myAddRel},
	data() {
		return {
			dialogVisible1:false,
			dialogVisible: false,
			formInline: {
				name: '',
			},
			form: {},
			page: 1,
			size: 10,
			total: 0,
			date: [],
			tableData: [],
			item:{},
			itemRel:{}
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		getData() {
			let data = {
				pageNumber: this.page,
				pageSize: this.size
			};
			if (this.formInline.name) {
				data['name'] = this.formInline.name.trim();
			}
			Api.query(data).then(res => {
				res.list.forEach(item => {
					item.id = item.app_id;
				})
				this.setCj(res.list);
				this.tableData = res.list;
				this.total = res.totalRow;
				
			});
		},
		// 标识层级
		setCj(list) {
			list.forEach(item => {
				item['tier'] = 1;
				if(item.children) {
					let arr1 = item.children;
					arr1.forEach(item => {
						item['tier'] = 2;
						if(item.children) {
							let arr2 = item.children;
							arr2.forEach(item => {
								item['tier'] = 3;
							})
						}
					})
				}
			})
		},
		// 打开修改搜索状态询问
		openDel(id) {
			this.$confirm('您确定要删除该应用吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.onDel(id);
				})
				.catch(() => {});
		},
		onDel(id) {
			 this.$confirm('您确定要删除该应用吗?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
			  Api.del({app_id:id}).then(res => {
			  	if(res.state) {
			  		this.$message({
			  		  message: '删除成功',
			  		  type: 'success'
			  		});
			  		this.getData();
			  	}else{
			  		this.$message.error(res.msg);
			  	}
			  });
			}).catch(() => {
			    
			});
		},
		delAppRel(id) {
			this.$confirm('您确定要删除该菜单吗?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
			  Api.delAppRel({app_res_id:id}).then(res => {
			  	if(res.state) {
			  		this.$message({
			  		  message: '删除成功',
			  		  type: 'success'
			  		});
			  		this.getData();
			  	}else{
			  		this.$message.error(res.msg);
			  	}
			  });
			}).catch(() => {
			    
			});
		},
		sousuo() {
			this.page = 1;
			this.getData();
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getData();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.page = val;
			this.getData();
		},
		onClose(state = false) {
			if(state) {
				this.getData();
			}
			this.dialogVisible = false;
		},
		onClose1(state = false) {
			if(state) {
				this.getData();
			}
			this.dialogVisible1 = false;
		},
		add() {
			this.item = {};
			this.dialogVisible = true;
		},
		setItem(item) {
			this.item = item;
			this.dialogVisible = true;
		},
		addRel(item) {
			this.itemRel = {
				id:'',
				pid:item.tier == 1 ? 0 : item.id,
				app_id:item.app_id,
				app_code:'',
				app_desc:'',
				app_url:'',//应用地址
				app_sort:1,//排序
				state:true,//状态
				app_name:'',//
			};
			this.dialogVisible1 = true;
		},
		setItemRel(item) {
			this.itemRel = item;
			this.dialogVisible1 = true;
		}
	}
};
</script>
<style lang="scss" scoped></style>

<style lang="scss">
.dialogVideo {
	.el-dialog__body {
		padding: 20px;
	}
}
</style>
